<template>
  <div class="progress-circle">
    <svg :width="width" :height="width" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
      <circle class="progress-bar" 
              r="50" cx="50" cy="50" 
              fill="transparent"
              :stroke-dasharray="dashArray"
              :stroke-dashoffset="dashOffset"/>
    </svg>

  </div>
</template>

<script>
export default {
  props: {
    width: {
      // svg 宽度
      type: Number,
      default:100,
    },
    percent: {
      type: Number,
      default: 80
    }
  },
  data(){
    return {
      dashArray: Math.PI * 100
    }
  },
  computed: {
    dashOffset(){
      return ( 100 - this.percent) /100 * this.dashArray
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .progress-circle{
    position: relative;
  }

  circle{
    stroke-width: 8px;
    transform-origin: center;
  }

  circle.progress-background{
    transform: scale(0.9);
    stroke: var(--color-theme-d); 
  }

  circle.progress-bar{
    transform: scale(0.9) rotate(-90deg);
    stroke: var(--color-theme); 
  }
</style>
